<template>
	<view class="foot-notice-container">
		<view class="foot-notice-item" v-for="(item,index) in data.noteList" :key="index">
			<FootItem :noticeInfo="item"></FootItem>
		</view>
	</view>
	<button class="foot-notice-btn" v-if="data.more" @tap="addMore">点击加载更多</button>
	<!-- <view class="foot-notice-note" v-else>已经到底啦</view> -->
	<view class="foot-notice-note" v-else>已经到底喽~</view>
</template>

<script>
	import FootItem from '@/components/index/foot-item.vue'
	import {onMounted,reactive} from 'vue'
	import global from '../../config/global.js'
	export default{
		name:'foot-notice',
		components:{
			FootItem
		},
		setup(props,context){
			let data = reactive({
				noteList:[],
				pageNum:1,
				more:true
			})
			
			onMounted(()=>{
				console.log(props)
				getData();
			})
			
			function getData(){
				if(props.type==10){
					uni.request({
						url:`${global.BASE_URL}/notice/new/catch/${data.pageNum}`,
						method:"GET",
						success:(res)=>{
							console.log(res)
							if(res.data.code){
								data.pageNum++;
								data.noteList=data.noteList.concat(res.data.data.list)
								if(data.noteList.length==res.data.data.total) data.more=false
							}else {
								uni.showModal({
									showCancel:false,
									title:'请求出错',
									content:res.data.msg
								})
							}
						},fail: (err) => {
							console.log(err)
						}
					})
				}else{
					uni.request({
						url:`${global.BASE_URL}/notice/catch/${props.type}/${data.pageNum}`,
						method:"GET",
						success:(res)=>{
							// console.log(res)
							if(res.data.code){
								data.pageNum++;
								data.noteList=data.noteList.concat(res.data.data.list)
								if(data.noteList.length==res.data.data.total) data.more=false
								if(props.type==0){
									context.emit('learn',data.noteList.length)
								}else if(props.type==1){
									context.emit('work',data.noteList.length)
								}
							}else {
								uni.showModal({
									showCancel:false,
									title:'请求出错',
									content:res.data.msg
								})
							}
						},
						fail: (err) => {
							console.log(err)
						}
					})
				}
				
			}
			
			function addMore(){
				getData();
			}
			
			return {
				data,
				addMore
			}
		}
	}
</script>

<style>
	.foot-notice-container{
		/* background-color: aqua; */
		/* height: 1000rpx; */
	}
	
	.foot-notice-btn{
		width: 400rpx;
		height: 70rpx;
		line-height: 70rpx;
		margin-top: 25rpx;
		font-size: 35rpx;
		background-color: #9BCDD2;
		color: white;
	}
	
	.foot-notice-note{
		width: 400rpx;
		height: 70rpx;
		line-height: 70rpx;
		margin-top: 25rpx;
		font-size: 35rpx;
		margin: 10rpx 175rpx;
		text-align: center;
		color: #aaaaaa;
		padding-bottom: 50rpx;
	}
</style>